/**************** 模态框样式（需搭配 modal.js 模块一起使用） ****************/
/******** 模态框主容器 ********/
.modal {
  $border-color: #cacbcf;
  $operations-height: 48px;
  position: fixed;
  inset: 0;
  z-index: 100;
  box-sizing: border-box;

  // 遮罩层
  .modal-masklayer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: rgba(58, 59, 62, 0.5);
    backdrop-filter: blur(8px);
    animation: masklayerShowAnimation 0.4s 0.1s both;

    // 使用关闭动画
    &.close-animation {
      animation: masklayerCloseAnimation 0.3s both;
    }

    // 定义出现时的动画
    @keyframes masklayerShowAnimation {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    // 定义关闭时的动画
    @keyframes masklayerCloseAnimation {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  }

  // 模态框主体基本样式
  .modal-base {
    position: absolute;
    z-index: 1;
    border: 1px solid $border-color;
    overflow: hidden;
  }

  // 普通中心模态框
  .modal-normal {
    @extend .modal-base;
    $modal-max-width: 96vw;
    width: auto;
    min-width: 120px;
    max-width: $modal-max-width;
    max-height: 90vh;
    left: 50%;
    top: 50%;
    border-radius: 12px;
    transform-origin: 50% 50%;
    animation: normalModalShowAnimation 0.2s 0.1s linear both;

    &.modal-title {
      span {
        max-width: $modal-max-width;
      }
    }

    // 使用关闭动画
    &.close-modal {
      animation: normalModalCloseAnimation 0.2s linear both;
    }

    // 定义出现时的动画
    @keyframes normalModalShowAnimation {
      0% {
        transform: translate(-50%, -50%) scale(0);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }

    // 定义关闭时的动画
    @keyframes normalModalCloseAnimation {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      100% {
        transform: translate(-50%, -50%) scale(0);
      }
    }
  }

  // 底部模态框
  .modal-bottom {
    @extend .modal-base;
    width: calc(100% - 2px);
    left: 1px;
    bottom: 0;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    animation: bottomModalShowAnimation 0.3s 0.1s linear both;

    &.modal-title {
      span {
        max-width: 90vw;
      }
    }

    &.modal-content {
      max-height: 78vh;
    }

    // 使用关闭动画
    &.close-modal {
      animation: bottomModalCloseAnimation 0.3s linear both;
    }

    // 定义出现时的动画
    @keyframes bottomModalShowAnimation {
      0% {
        transform: translateY(100%);
      }
      100% {
        transform: translateY(0%);
      }
    }

    // 定义关闭时的动画
    @keyframes bottomModalCloseAnimation {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(100%);
      }
    }
  }

  // 模态框标题栏
  .modal-title {
    height: 46px;
    background-color: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid $border-color;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #8a8b8f;
    }
  }

  // 模态框内容
  .modal-content {
    $vertical-gap: 18px;
    height: calc(100% - $operations-height);
    min-height: calc(3em + 36px);
    max-height: calc(90vh - $operations-height);
    padding: 18px 12px;
    background-color: #ffffff;
    text-align: justify;
    line-height: 1.5;
    font-size: 1rem;
    overflow: hidden auto;

    img {
      max-width: 100%;
      max-height: 100%;
      display: block;
    }
  }

  // 模态框操作
  .modal-operations {
    height: $operations-height;
    background-color: rgba(255, 255, 255, 0.92);
    border-top: 1px solid $border-color;
    display: flex;
    align-items: center;

    // 操作项
    .operation-item {
      flex-grow: 1;
      $item-height: 46px;
      height: $item-height;
      text-align: center;
      font-size: 1.08rem;
      line-height: $item-height;
      cursor: pointer;

      // 关闭模态框
      &.modal-close {
        $close-text-color: #5a5b5e;
        color: $close-text-color;

        &:active {
          color: lighten($close-text-color, 15%);
        }
      }

      // 确认按钮
      &.modal-confirm {
        $normal-color: #2e8dd6;
        background-color: $normal-color;
        color: #fff;

        &:active {
          background-color: lighten($normal-color, 15%);
        }

        // 危险操作
        &.danger {
          $dager-color: #da4141;
          background-color: $dager-color;
          color: #fff;

          &:active {
            background-color: lighten($dager-color, 15%);
          }
        }
      }
    }
  }
}
